<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：userscript 应注释掉 -->

    <!-- <link rel="stylesheet" href="https://cdn.90so.net/layui/2.5.4/css/layui.css" media="all"> -->
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
        /* .layui-table-cell {
            overflow: visible !important;
        } */

        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                <div class="layui-upload-list layui-form">
                    <table class="layui-table" lay-filter="demo" id="demo">
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>


            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn ayui-btn-primary" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>

            <!-- 注意：userscript 应注释掉 -->
            <!-- <script src="https://cdn.90so.net/layui/2.5.4/layui.all.js" charset="utf-8"></script> -->
            <script>
                console.log('In the page');
            </script>
            <script>
                // layui.use(['upload', 'table', 'form'], function () {
                ;
                ! function () {
                    debugger;
                    var $ = layui.jquery,
                        table = layui.table,
                        form = layui.form,
                        upload = layui.upload;


                    var files=null;
                    table.cache.demo=null;

                    //更新工作目录
                    updateWorkList();


                    //执行渲染
                    var tableIns = table.render({
                        elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
                        defaultToolbar: ['filter'], // 'print', 'exports'],
                        done: function (res, curr, count) {
                            count || this.elem.next('.layui-table-view').find('.layui-table-header')
                                .css('overflow', 'auto');
                            layui.each($('select'), function (index, item) {
                                var elem = $(item);
                                elem.val(elem.data('value')).parents('div.layui-table-cell')
                                    .css('overflow', 'visible ');
                            });
                            form.render();
                        },
                        height: 450,
                        text: {
                            none: '请选择文件',
                        },
                        cols: [
                            [{
                                    field: 'index',
                                    type: 'checkbox',
                                    LAY_CHECKED: 'true',
                                },
                                {
                                    field: 'filename',
                                    sort: false,
                                    title: '文件名'
                                },
                                {
                                    field: 'size',
                                    sort: false,
                                    title: '大小(KB)',
                                    width: 60,
                                    hide: true,
                                },
                                {
                                    field: 'title',
                                    sort: false,
                                    title: '标题',
                                    edit: 'text',
                                },
                                {
                                    field: 'jobno',
                                    sort: false,
                                    // fixed: true,
                                    title: '工作控制号',
                                    edit: 'text',
                                },
                                {
                                    field: 'certno',
                                    sort: false,
                                    // fixed: true,
                                    title: '证书号',
                                    edit: 'text',
                                },
                                {
                                    field: 'type',
                                    sort: false,
                                    // fixed: true,
                                    title: '类型',
                                    // edit: 'text',
                                    templet: function (d) {
                                        // 模板的实现方式也是多种多样，这里简单返回固定的
                                        return '<select name="type" lay-filter="typeSelect" lay-verify="required" data-value="' +
                                            d.type + '" >\n' +
                                            '        <option value="ps_app_info">申请书</option>\n' +
                                            '        <option value="ps_factory_info">工厂资料</option>\n' +
                                            '        <option value="ps_cert_report_info">证书报告</option>\n' +
                                            '        <option value="ps_cert_pl">批量等效文件</option>\n' +
                                            '        <option value="ps_others">其他</option>\n' +
                                            '      </select>';
                                    }
                                },

                                {
                                    field: 'status',
                                    sort: false,
                                    title: '状态'
                                },
                                // {
                                //     field: 'action',
                                //     sort: false,
                                //     fixed: true,
                                //     toolbar: '#barDemo',
                                //     title: '操作'
                                // },
                                {
                                    field: 'workId',
                                    sort: false,
                                    title: 'workId',
                                    hide: true,
                                    edit: 'text',
                                },
                                {
                                    field: 'type_code',
                                    sort: false,
                                    title: 'type_code',
                                    hide: true
                                },
                                {
                                    field: 'type_name',
                                    sort: false,
                                    title: 'type_name',
                                    hide: true
                                },
                                {
                                    field: 'flag',
                                    sort: false,
                                    title: 'flag',
                                    hide: true
                                },

                            ]
                        ], //设置表头
                        toolbar: '#toolbarDemo'
                        //,…… //更多参数参考右侧目录：基本参数选项
                    });

                    //头工具栏事件
                    table.on('toolbar(demo)', function (obj) {
                        debugger;

                        var checkStatus = table.checkStatus(obj.config.id);
                        switch (obj.event) {
                            case 'getCheckData':
                                var data = checkStatus.data;
                                layer.alert(JSON.stringify(data));
                                break;
                            case 'getCheckLength':
                                var data = checkStatus.data;
                                layer.msg('选中了：' + data.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选' : '未全选');
                                break;
                        };
                    });

                    // 监听修改update到表格中
                    form.on('select(typeSelect)', function (data) {
                        debugger;
                        var elem = $(data.elem);
                        var trElem = elem.parents('tr');
                        var tableData = table.cache['demo'];
                        // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
                        tableData[trElem.data('index')][elem.attr('name')] = data.value;
                        // 其他的操作看需求 TODO
                    });





                    //多文件列表示例
                    // var demoListView = $('#demoList');
                    var uploadListIns = upload.render({
                        elem: '#testList',
                        url: '',
                        accept: 'file',
                        multiple: true,
                        auto: false,
                        bindAction: '',
                        choose: function (obj) {
                            files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            // var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function (index, file, result) {
                                //     var tr = $(['<tr id="upload-' + index +
                                //         '" class="data-row">',
                                //         '<td>' + index + '</td>',
                                //         '<td>' + file.name + '</td>',
                                //         '<td>' + (file.size / 1024).toFixed(
                                //             1) +
                                //         'kb</td>',
                                //         '<td>等待上传</td>',
                                //         '<td>',
                                //         // '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                //         // '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                //         '</td>',
                                //         '</tr>'
                                //     ].join(''));
                                debugger;

                                if (table.cache.demo == undefined) {
                                    var oldData = new Array();
                                } else {
                                    var oldData = table.cache.demo;
                                }
                                d = {
                                    'index': index,
                                    'filename': file.name,
                                    'size': Math.round(file.size / 1024),
                                    'title': getTitle(file.name),
                                    'jobno': getJobno(file.name),
                                    'certno': getCertno(file.name),
                                    'type': 'ps_others',
                                    'status': '等待上传',
                                    'workId': '',
                                    'type_code': '',
                                    'type_name': '',
                                    'flag': '',


                                };

                                oldData.push(d);
                                table.reload('demo', {
                                    data: oldData
                                });

                                function getTitle(fn) {
                                    var index1 = fn.lastIndexOf(".");
                                    if (index1 < 0) {
                                        return fn
                                    }
                                    return fn.substring(0, index1);
                                }

                                function getJobno(fn) {
                                    var m = fn.match(/[a-z]{2}\d{2}p[a-z]{2}\d{5}/gi);
                                    if (m == null) {
                                        return '';
                                    }
                                    return m[0].toUpperCase();
                                }

                                function getCertno(fn) {
                                    var m1 = fn.match(
                                        /[a-z]{2}\d{2}p[a-z]{2}\d{5}_\d{2}/gi);
                                    var m2 = fn.match(/[a-z]{2}\d{2}p[a-z]{2}\d{5}/gi);
                                    if (m1 != null && m1.length > 0) {
                                        return m1[0].toUpperCase();;
                                    } else if (m2 != null && m2.length > 0) {
                                        return m2[0].toUpperCase();
                                    } else {
                                        return '';
                                    }
                                }

                                //单个重传
                                // tr.find('.demo-reload').on('click',
                                //     function () {
                                //         obj.upload(index, file);
                                //     });

                                // //删除
                                // tr.find('.demo-delete').on('click',
                                //     function () {
                                //         delete files[index]; //删除对应的文件
                                //         tr.remove();
                                //         uploadListIns.config.elem.next()[0]
                                //             .value =
                                //             ''; //清空 input file 值，以免删除后出现同名文件不可选
                                // });

                                // demoListView.append(tr);
                                // table.init('demo',{
                                //     toolbar: '#toolbarDemo',
                                // });
                            });

                        },
                        done: function (res, index, upload) {
                            if (res.code == 0) { //上传成功
                                var tr = demoListView.find('tr#upload-' + index),
                                    tds = tr.children();
                                tds.eq(2).html(
                                    '<span style="color: #5FB878;">上传成功</span>');
                                tds.eq(3).html(''); //清空操作
                                return delete this.files[index]; //删除文件队列已经上传成功的文件
                            }
                            this.error(index, upload);
                        },
                        error: function (index, upload) {
                            var tr = demoListView.find('tr#upload-' + index),
                                tds = tr.children();
                            tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(4).find('.demo-reload').removeClass(
                                'layui-hide'); //显示重传
                        }
                    });

                    // 删除
                    // $('tr.data-row').find('.demo-delete').on('click',
                    //     function () {
                    //         delete files[index]; //删除对应的文件
                    //         tr.remove();
                    //         uploadListIns.config.elem.next()[0]
                    //             .value =
                    //             ''; //清空 input file 值，以免删除后出现同名文件不可选
                    //     });
                    //监听行单击事件（单击事件为：rowDouble）
                    table.on('rowDouble(demo)', function (obj) {
                        debugger;

                        var data = obj.data;

                        layer.alert(JSON.stringify(data), {
                            title: '当前行数据：'
                        });
                    });

                    //监听单元格事件
                    table.on('edit(demo)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
                        debugger;
                        console.log(obj.value); //得到修改后的值
                        console.log(obj.field); //当前编辑的字段名
                        console.log(obj.data); //所在行的所有相关数据
                        var oldData= obj.data; 
                        oldData['certno']=oldData['jobno'];
                        obj.update(oldData);
                        // form.render();
                        var tableData = table.cache['demo'];
                        tableData[obj.tr.data('index')] = obj.data;
                        tableIns.reload({data:tableData});
                    });


                    //更新本地工作列表
                    function updateWorkList() {
                        //清空表
                        // layui.data('worklist', null);

                        //准备数据
                        data = {
                            "draw": "1",
                            "columns[0][data]": "SHIPNAME",
                            "columns[0][name]": "",
                            "columns[0][searchable]": "true",
                            "columns[0][orderable]": "false",
                            "columns[0][search][value]": "",
                            "columns[0][search][regex]": "false",
                            "columns[1][data]": "BELONG_COMMON_FLOW",
                            "columns[1][name]": "",
                            "columns[1][searchable]": "true",
                            "columns[1][orderable]": "false",
                            "columns[1][search][value]": "",
                            "columns[1][search][regex]": "false",
                            "columns[2][data]": "JOBNO",
                            "columns[2][name]": "",
                            "columns[2][searchable]": "true",
                            "columns[2][orderable]": "false",
                            "columns[2][search][value]": "",
                            "columns[2][search][regex]": "false",
                            "columns[3][data]": "STEPNAME",
                            "columns[3][name]": "",
                            "columns[3][searchable]": "true",
                            "columns[3][orderable]": "false",
                            "columns[3][search][value]": "",
                            "columns[3][search][regex]": "false",
                            "columns[4][data]": "CREATE_TIME",
                            "columns[4][name]": "",
                            "columns[4][searchable]": "true",
                            "columns[4][orderable]": "false",
                            "columns[4][search][value]": "",
                            "columns[4][search][regex]": "false",
                            "order[0][column]": "0",
                            "order[0][dir]": "asc",
                            "start": "0",
                            "length": "10000", //返回数据长度
                            "search[value]": "",
                            "search[regex]": "false",
                            "workTypeId": "",
                            "workNo": "",
                            "orderColumn": "SHIPNAME",
                            "dir": "asc",
                        }

                        var url = 'http://cn.ssmis2018cloud.ccs.org.cn/ssmis/bs/SysPendWork/getPendWorkList';

                        $.ajax({
                            type: 'post',
                            url: url,
                            dataType: 'json',
                            data: data, //这是是要提交的参数
                            async: false,
                            success: function (res) { //这里的data是后台返回的参数
                                console.log(res);
                                let data = res['data'];
                                for (let index = 0; index < data.length; index++) {
                                    const d = data[index];
                                    layui.data('worklist', {
                                        key: d['BUSINESS_ID'],
                                        value: d
                                    });
                                }
                                layer.msg('数据更新完成');
                            }
                        })
                    }

                    //监听工具条
                    // table.on('tool(demo)', function (obj) {
                    //     var data = obj.data;
                    //     if (obj.event === 'detail') {
                    //         console.log(data);
                    //         layer.msg('ID：' + data.index + ' 的查看操作');
                    //     } else if (obj.event === 'del') {
                    //         console.log('---删除前---');
                    //         console.log(obj);
                    //         console.log(files);
                    //         layer.confirm('真的删除行么', function (index) {
                    //             obj.del();
                    //             delete files[data.index];
                    //             console.log('---删除后---');
                    //             console.log(obj);
                    //             console.log(files);

                    //             layer.close(index);
                    //         });
                    //     } else if (obj.event === 'edit') {
                    //         layer.alert('编辑行：<br>' + JSON.stringify(data))
                    //     }
                    // });

                    // });
                }();
            </script>

        </div>
    </div>
</body>

</html>